<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <caption>
        书价
      </caption>
      <tr>
        <td>书名</td>
        <td>价格</td>
      </tr>
      <tr>
        <td>网页工程实训</td>
        <td>30</td>
      </tr>
      <tr>
        <td>c语言工程实训</td>
        <td>32</td>
      </tr>
    </table>
    <button class="add">增加一行</button>
    <button class="delete">删除第二行</button>
    <button class="change">修改标题</button>
  </body>
  <script>
    var tableDom = document.querySelector("table");
    var titleDom = document.querySelector("caption");

    var buttonDomChange = document.querySelector(".change");
    var buttonDomAdd = document.querySelector(".add");
    var buttonDomDelete = document.querySelector(".delete");

    buttonDomChange.onclick = function () {
      titleDom.innerHTML = "书的价格";
    };

    buttonDomAdd.onclick = function () {
      var newRow = document.createElement("tr");
      newRow.innerHTML = "<td>新的一行</td><td>新的价格</td>";
      console.log(newRow);
      tableDom.appendChild(newRow);
    };

    buttonDomDelete.onclick = function(){
        var secondDom = document.querySelector("table tr:nth-child(2)");
        secondDom.style.display = "none";
        console.log(secondDom);
    }
  </script>
</html>
